// if语句 支持@if @else-if @else 判断语句
$width:800px;
@if $width>=1200px {
    .box{
        display: flex;
        background: yellow;
    }
}
@else if $width>=980px{
    .box{
        background: red;
    }
}
@else{
    .box{
        background: blue;
    }
}

.box1{
    @if $width>=1200px{
        display: flex;
        background: yellow;
    }
    @else if $width>=980px{
        background: red;
    }
    @else{
        background: blue;
    }
}

// for循环 支持用@for 指令实现类似for()的循环
    // @for $variable from start through end{} // 循环值包含end值
    // @for $variable from start to end{} // 循环值不包含end值
@for $i from 1 through 9{ // 这个里边包含end 9
    .col-#{$i}{
        width: 100px * $i;
    }
}
@for $j from 1 to 9{// 不包含end 9
    .cloumn-#{$j}{
        height: 10px * $j;
    }
}


// each循环
    // @each $variable in <list>{}
    //  @each $key,$variable in <Maps>{}
   $logos:huawei,horner,xiaomi,oppo,apple;
   @each $val in $logos{
        .logo-#{$val}{
            background: url(../image/#{$val}.png)
        }
   };

   $icon:(
    success: green,
    info:#eee,
    warn:yellow,
    error:red
   );
   @each $key,$value in $icon{
    .icon-#{$key}{
        color: $value;
    }
   }

// while循环 @while 循环类似于while(){},一直重复执行直到表达式为false
    //语法： @while 表达式{}
    $n: 1;
    @while $n<=5{
        .row-#{$n}{
            width: 10px * $n;
        };
        $n: $n+1;
    } // 与@for循环一样结果

